<template>
	<div v-if="filmInfo">
		<detail-header v-scroll="50">{{ filmInfo.name }}</detail-header>
		<!-- <img :src="filmInfo.poster"/> -->
		<div :style="{
			backgroundImage: 'url(' + filmInfo.poster + ')',
		}" class="poster"></div>
		<div class="content">
			<div>{{ filmInfo.name }}</div>
			<div>
				<div class="detail-text">{{ filmInfo.category }}</div>
				<div class="detail-text">
					{{ filmInfo.premiereAt | dateFilter }}上映
				</div>
				<div class="detail-text">
					{{ filmInfo.nation }} | {{ filmInfo.runtime }} 分钟
				</div>
				<div class="detail-text" style="line-height: 15px" :class="isHidden ? 'hidden' : ''">
					{{ filmInfo.synopsis }}
				</div>
				<div>
					<i class="iconfont" @click="isHidden = !isHidden" :class="isHidden ? 'icon-xiangxia' : 'icon-xiangshang'"></i>
				</div>
			</div>
			<div>
				<div>演职人员</div>
				<!-- 轮播显示3.5张 -->
				<detail-swiper :perview="3.5" name="actors">
					<detail-swiper-item v-for="(data, index) in filmInfo.actors" :key="index">
						<div :style="{
							backgroundImage: 'url(' + data.avatarAddress + ')',
						}" class="avatar"></div>
						<div style="text-align: center;font-size: 12px;">{{ data.name }}</div>
						<div style="text-align: center;font-size: 13px;">{{ data.role }}</div>
					</detail-swiper-item>
				</detail-swiper>
			</div>

			<div>
				<div>剧照</div>
				<!-- 轮播显示2.5张 -->
				<detail-swiper :perview="2.5" name="potos">
					<detail-swiper-item v-for="(data, index) in filmInfo.photos" :key="index">
						<div :style="{
							backgroundImage: 'url(' + data + ')',
						}" class="avatar" @click="handlePreview(index)"></div>
					</detail-swiper-item>
				</detail-swiper>
			</div>
		</div>
	</div>
</template>
<script>
import http from "@/util/http";
import obj from '@/util/mixinObj'
import moment from "moment";
import Vue from "vue";
import detailSwiper from "@/components/detail/DetailSwiper";
import detailHeader from "@/components/detail/DetailHeader";
import detailSwiperItem from "@/components/detail/DetailSwiperItem";
import { ImagePreview } from 'vant';


moment.locale("zh-cn"); // 设置成中文
Vue.filter("dateFilter", (data) => {
	return moment(data * 1000).format("YYYY-MM-DD");
});

Vue.directive('scroll', {
	inserted (el, binding) {
		// console.log(el);
		el.style.dispaly = 'none'

		window.onscroll = () => {
			if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
				el.style.dispaly = 'block'
			} else {
				el.style.dispaly = 'none'
			}
		}
	},

	// 销毁执行生命周期
	unbind () {
		window.onscroll = null
	}
})
export default {
	mixins:[obj],
	data () {
		return {
			filmInfo: null,
			isHidden: true,
		};
	},
	components: {
		detailSwiper,
		detailSwiperItem,
		detailHeader
	},
	methods: {
		handlePreview(index){
			ImagePreview({
				images: this.filmInfo.photos,
				startPosition: index,
				closeable: true,
				closeIconPosition: 'top-left'
			})
		} 
	},
	mounted () {
		
		// 当前匹配路由
		// console.log(this.$route.params.id);

		// axios 利用 id 发请求到详情接口，获取详细数据，布局页面

		http({
			url: `/gateway?filmId=${this.$route.params.id}&k=9692906`,
			headers: {
				"X-Host": "mall.film-ticket.film.info",
			},
		}).then((res) => {
			// console.log(res.data.data.film);
			this.filmInfo = res.data.data.film;

		});
	},
};
</script>
<style lang="scss" scoped>
.poster {
	width: 100%;
	height: 13.125rem;
	background-position: center;
	background-size: cover;
}

.content {
	padding: 0.9375rem;

	.detail-text {
		color: #797d82;
		font-size: 13px;
		margin-top: 0.25rem;
	}
}

.hidden {
	overflow: hidden;
	height: 26px;
}

.avatar {
	width: 100%;
	height: 5.3125rem;
	background-position: center;
	background-size: cover;
}
</style>
